<template>
  <div class="uploadSing">
    <el-upload v-if="ossUpload" 
      v-loading="loading"
      class="avatar-uploader"
      :action="action"
      :show-file-list="false"
      :disabled="imageUrl ? true : false"
      :data="data"
      :headers="headers"
      :on-error="onError"
      :on-progress="handleProgress"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <div v-if="imageUrl" class="el-upload-list__item-actions">
        <span class="el-upload-list__item-preview" @click="handlePictureCardPreviews">
          <i class="el-icon-zoom-in"></i>
        </span>
        <span v-if="delBtnImgFlag" class="el-upload-list__item-preview" @click="handleRemoves">
          <i class="el-icon-delete"></i>
        </span>
      </div>
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      <div class="el-upload__tip" slot="tip">{{tips}}</div>
    </el-upload>
    <el-dialog  :close-on-click-modal="false" :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'fileUploadNew',
  data() {
    return {
      fileList: [],
      loading: false,
      dialogImageUrl: '',
      dialogVisible: false,
      imageUrl: '',
      fileData: '',
      showBtnImg: true,
      noneBtnImg: false
    }
  },
  props: {
    value: {
      default: () => []
    },
    ossUpload: {
      type: Boolean,
      default: false
    },
    //提交地址,
    action: {
      type: String,
      default: ''
    },
    //设置上传的请求头部
    headers: {
      type: Object,
      default: () => {}
    },
    //上传时附带的额外参数
    data: {
      type: Object,
      default: () => {}
    },
    //支持最大上传文件数
    limit: {
      type: Number,
      default: 100
    },
    //是否选择完文件之后自动上传，默认true
    auto_upload: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    //上传之前的处理
    beforeUpload: {
      type: Function,
      default: function(file) {
        let types = ['image/jpeg', 'image/jpg', 'image/png']
        const isImage = types.includes(file.type)
        if (!isImage) {
          this.$message.error('上传图片格式只能是jpg/jpeg/png!')
          return false
        }
        if (file.size / 1024 / 1024 > 2) {
          this.$message('请控制大小在2M内')
          return false
        }
      }
    },
    tips: {
      type: String,
      default: '只能上传jpg/png/jpeg文件，且不超过2M'
    },
    //控制删除按钮显示隐藏
    delBtnImgFlag: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    value: {
      handler(val) {
        //识别oss
        if (this.ossUpload) {
          this.imageUrl = val
        } else {
          //多文件上传
          this.fileList = [...val] || []
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    //放大
    handlePictureCardPreviews() {
      this.dialogVisible = true
      this.dialogImageUrl = this.imageUrl
    },
    //删除
    handleRemoves() {
      console.log(this.data, 'this.data.type')
      this.$confirm('确定移除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let obj = {
            url: '',
            type: this.data.type,
            side: this.data.side,
            statusDel: 'delete' //添加删除标示，因为有ocr识别信息需要保留
          }
          this.$emit('fileList', obj)
        })
        .catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // });
        })
    },
    dealImgChange(file, fileList) {
      this.noneBtnImg = fileList.length >= this.limit
    },
    handleAvatarSuccess(res, file) {
      this.loading = false
      if (res.code == '0') {
        this.$message.success('成功')
        this.imageUrl = res.data.url || URL.createObjectURL(file.raw)
        this.$emit('fileList', Object.assign(this.data, res.data))
      } else {
        this.$message({
          type: 'warning',
          message: res.message || '请上传合格的图片'
        })
      }
    },
    handleProgress() {
      this.loading = true
    },
    onError(res) {
      this.loading = false
    },
    uploadFile(file) {
      this.fileData.append('file', file.file)
    },
  }
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon,.el-upload--picture-card {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
  }
  .avatar {
    width: 80px;
    height: 80px;
    display: block;
  }
  .el-upload-list--picture-card .el-upload-list__item {
      width: 80px;
      height: 80px;
  }
  .el-upload__tip {
    text-align: center;
  }
  .uoloadSty .el-upload--picture-card{
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
  }
  .disUoloadSty .el-upload--picture-card{
    display: none;   /* 上传按钮隐藏 */
  }
  .el-upload-list__item-actions {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    visibility: hidden;
    background: rgba(0, 0, 0, 0.4);
  }
  .el-upload-list__item-preview {
    display: inline-block;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .el-icon-zoom-in:before,
  .el-icon-delete:before {
    font-size: 30px;
    color: #fff;
  }
  .el-upload:hover .el-upload-list__item-actions {
    visibility: visible;
    transition: 1s;
    z-index: 200;
  }
</style>